<!DOCTYPE html>
<html>

<head>
    <title>Reader Profile</title>

    <link href="../static/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="../static/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="../static/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../static/css/navbar.css">
    <link rel="stylesheet" type="text/css" href="../static/css/userInfo.css">
    <script type="text/javascript" src="../static/js/cookie.js"></script>
    <script type="text/javascript" src="../static/js/userInfo.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <div class="container-fluid">
        <nav class="navbar-default" role="navigation">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a id="left-nav" href="/">
                    <img src="../static/img/icon.png">
                </a>
                <a id="arrow" href="#">
                    <img src="../static/img/left.png">
                </a>
            </div>
            <div class="collapse navbar-collapse" id="navbar-collapse-1">
                <ul id='right-nav' class="nav navbar-nav navbar-right">

                    <li class="dropdown" id="right-nav-dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <span id="user-id"  style = "font-family: 'Open Sans',sans-serif";></span>
                            <span id="picdown"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li>
                                <a id="userRecord" href="#">
                                    <img src="../static/img/profile.png">
                                    <span style = "font-family: 'Open Sans',sans-serif">My Home</span>
                                </a>
                            </li>
                            <li>
                                <a id="sign-out" href="#">
                                    <img src="../static/img/logout.png">
                                    <span style = "font-family: 'Open Sans',sans-serif">Sign Out</span>
                                </a>
                            </li>
                        </ul>
                    </li>

                </ul>
            </div>
        </nav>
        <div class="row">
            <div id="sidebar" class="nav-collapse">
                <ul class="sidebar-menu">
                    <li class="active">
                        <a id="My-Information" class="" href="javascript:">
                            <span id='pic1' class="icon-change"></span>
                            <span style = "font-family: 'Open Sans',sans-serif">My Information</span>
                        </a>
                    </li>

                    <li>
                        <a id="Alter-Password" class="" href="javascript:">
                            <span id='pic2' class="icon-change"></span>
                            <span style = "font-family: 'Open Sans',sans-serif">Alter Password</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div id="right-display">
                <div id="bg-panel">
                    <div id="MyInfomation" class="Info">
                        <h3>My Information</h3>

                        <div class="inner-panel">
                            <ul>
                                <li>
                                    <div class="InfoType">
                                        <span class="glyphicon glyphicon-leaf"></span>
                                        <span>Certificate No</span>
                                    </div>
                                    <span id="textID" class="right"></span>
                                </li>
                                <li>
                                    <div class="InfoType">
                                        <span class="glyphicon glyphicon-user"></span>
                                        <span>Name</span>
                                    </div>
                                    <span id="textName" class="right"></span>
                                </li>
                                <li>
                                    <div class="InfoType">
                                        <span class="glyphicon glyphicon-calendar"></span>
                                        <span>registerTime</span>
                                    </div>
                                    <span id="textRegister" class="right"></span>
                                </li>
                            </ul>
                        </div>

                    </div>


                    <div id="Alter-PWD" class="Info">
                        <h3>Alter Password</h3>

                        <div class="inner-panel">
                            <ul>
                                <li>
                                    <div class="InfoType">
                                        <span class="glyphicon glyphicon-bookmark"></span>
                                        <span>Old password</span>
                                    </div>
                                    <input class="input-control" id="oldPWD" type=password  maxlength="16" onkeyup="value=value.replace(/[^0-9a-zA-Z]/,'')"> </input>
                                </li>
                                <li>
                                    <div class="InfoType">
                                        <span class="glyphicon glyphicon-list"></span>
                                        <span>New Password</span>
                                    </div>
                                    <input class="input-control" id="newPWD" type=password  maxlength="16" onkeyup="value=value.replace(/[^0-9a-zA-Z]/,'')"> </input>
                                </li>
                                <li>
                                    <div class="InfoType">
                                        <span class="glyphicon glyphicon-ok"></span>
                                        <span>Confirm Password</span>
                                    </div>
                                    <input class="input-control" id="confirmPWD" type=password maxlength="16" onkeyup="value=value.replace(/[^0-9a-zA-Z]/,'')"></input>
                                </li>
                            </ul>
                            <div class="bt" class="center-block">
                                <button id="submit" type="button" class="btn btn-warning" onclick="submitPWD()">
                                    <span class="glyphicon glyphicon-check"></span>
                                    <span> Submit</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>


</body>

</html>